<template>
  <div class="login-wrapper" ref="login">
    <section class="login-box">
      <div class="login-left-box">
        <div class="login-title" style="font-size: 30px;width: 100%;height: 100%;padding-top: 50px;padding-left: 50px;letter-spacing:1.07px;">
          <spen>车位租售管理系统</spen>
        </div>
      </div>
      <div class="login-right-box" style="background-color: #FFFFFF">
        <el-form label-position="top" style="padding: 50px;width: 100%;height: 100%" label-width="80px" :model="loginForm" :rules="loginRules" ref="loginRuleForm" :show-message="showErroMsg">
          <h1 style="color: #404040; font-size: 28px;">登录</h1>
          <el-form-item label="账号" prop="account" class="form-account">
            <el-input v-model="loginForm.account" id="userName" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="form-password">
            <el-input :type="passType" v-model="loginForm.password" placeholder="请输入密码" id="passWord"></el-input>
          </el-form-item>
          <div class="btn-groups mt20">
            <el-checkbox v-model="remPass" tabIndex="4" style="font-size: 14px;color: rgba(16,16,16,0.68);">记住密码</el-checkbox>
          </div>
          <el-button type="success" style="height: 40px;line-height: 40px;font-size: 18px;font-family: HiraginoSansGB-W6;letter-spacing: 0.55px;" class="ake_btn ake_btn_blue btn_block mt50" @click="toLogin('loginRuleForm')" tabIndex="5">登录</el-button>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import common from '../mixins/common.js'
import crypto from '../mixins/crypto.js'
import InputSelectBox from '../components/widgets/InputSelectBox.vue'
import {setCookie, getCookie, deleteCookie} from '../assets/js/storage.js'
import {getByteLength} from '../assets/js/help.js'
import constans from '../assets/utils/Constans.js';
export default {
  mixins: [common, crypto],
  data () {
    return {
      passType: 'text',
      showErroMsg: true,
      loginForm: {
        account: '',
        password: ''
      },
      loginRules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },
      curLang: 0,
      inputVal: '',
      accountVal: '',
      remPass: false,
      showTip: false,
      accountList: []
    }
  },
  computed: {
    ...mapGetters({
      sysLanguage: 'getSysLanguage'
    })
  },
  created () {
    let self = this;
    if(window.localStorage.getItem('_l') == 1){
      self.loginForm.account = window.localStorage.getItem('_u');
      self.loginForm.password = window.localStorage.getItem('_p');
      self.remPass = true;
    }else{
      self.loginForm.account = "";
      self.loginForm.password = "";
    }
  },
  mounted () {
    this.$store.commit('LOADING_TOGGLE', false);
    this.passType = 'password';
  },
  methods: {
    toLogin (formName) {
      let self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          self.$http.post(constans.login , self.loginForm).then((response) => {
            var result = response.data;

            sessionStorage.setItem('user', self.loginForm.account);

            if(self.remPass==true){
              window.localStorage.setItem('_u', self.loginForm.account);
              window.localStorage.setItem('_p', self.loginForm.password);
              window.localStorage.setItem('_l', 1);
            }else{
              window.localStorage.setItem('_u', "");
              window.localStorage.setItem('_p', "");
              window.localStorage.setItem('_l', 0);
            }

            if (result.messageCode === 200) {
              this.$message({
                type: 'success',
                message: '登录成功'
              });
              window.localStorage.setItem('_t', result.data);
              self.$router.push("/");
            } else {
              self.showToast(result.message, 2, 1500);
            }
          },(response) => {
            self.showToast("服务器已关闭！");
          });
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style lang="less">
@import '../assets/less/base/form.less';
@import '../assets/less/base/button.less';
@import '../assets/less/login.less';
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
.form-group .login-tip{
  margin-top: @spacing;
  i {
    color: @red;
    margin-right: @spacing;
  }
}
.mt50{ margin-top: 50px; }
.mt20{ margin-top: 20px; }
.login-wrapper .el-form-item.is-required .el-form-item__label {
  width: 100%;
  color: #323232;
  font-size: 16px;
  text-indent: 20px;
  &:before {
    content: '';
    margin-right: 0px;
  }
}

.login-wrapper .el-form-item.is-required.form-account .el-form-item__label {
  background: url("../assets/img/ic_account_login.png") no-repeat;
  background-position: 0px 2px;
}

.login-wrapper .el-form-item.is-required.form-password .el-form-item__label {
  background: url("../assets/img/ic_password_login.png") no-repeat;
  background-position: 0px 2px;
}

  .login-right-box .el-form-item__label {
    line-height: inherit;
  }
  .login-right-box .el-form-item:not(:first-child) {
    margin-top: 35px;
  }
</style>
